<script lang="ts" setup name="StoreDialog">
import { FormInstance } from 'element-plus'
import { Dialog } from '~/src/api/interface'
import { StoreManagement } from '~/src/api/interface/storeManagement'
import AreaList from '/@/assets/json/pcaCode.json'
const ruleFormRef = ref<FormInstance>()

const dialogProps = reactive<Dialog<StoreManagement.Store>>({
  title: '新增',
  data: {
    storeName: '',
    address: '',
  },
  visible: false,
})
const rules = reactive({
  storeName: [{ required: true, message: '门店名称必填' }],
  address: [{ required: true, message: '门店地址必填' }],
})
const CasProps = ref({ label: 'name', value: 'code' })
const { title, visible } = toRefs(dialogProps)
const acceptParams = (params: Dialog<StoreManagement.Store>) => {
  Object.assign(dialogProps, params)
  dialogProps.visible = true
}

watch(
  () => visible!.value,
  (value) => {
    if (!value) ruleFormRef.value?.resetFields()
  }
)

const handleSubmit = async () => {
  await ruleFormRef.value?.validate()
  await useHandleDialog(dialogProps.api as (params: any) => Promise<any>, dialogProps.data, dialogProps.getTableList as () => void)
  dialogProps.visible = false
}
defineExpose({ acceptParams })
</script>

<template>
  <vab-dialog v-model:modelValue="visible" :title="title + '门店'" :width="600">
    <!--     :disabled="dialogProps.isView"
      :hide-required-asterisk="dialogVProps.isView" -->
    <el-form ref="ruleFormRef" label-suffix=" :" label-width="100px" :model="dialogProps.data" :rules="rules">
      <el-form-item label="门店名称" prop="storeName">
        <el-input v-model="dialogProps.data!.storeName" clearable />
      </el-form-item>
      <el-form-item label="门店联系人" prop="linkMan">
        <el-input v-model="dialogProps.data!.linkMan" clearable />
      </el-form-item>
      <el-form-item label="联系电话" prop="mobile">
        <el-input v-model="dialogProps.data!.mobile" clearable />
      </el-form-item>
      <el-form-item label="商户编号" prop="payAccount">
        <el-input v-model="dialogProps.data!.payAccount" clearable />
      </el-form-item>
      <el-form-item label="所属区域" prop="areaObject">
        <el-cascader v-model="dialogProps.data!.areaObject" class="w100" :options="AreaList" :props="CasProps" />
      </el-form-item>
      <el-form-item label="门店地址" prop="address">
        <el-input v-model="dialogProps.data!.address" clearable />
      </el-form-item>
      <el-form-item label="所属行业" prop="industryId">
        <!-- <el-select class="w100" v-model="dialogProps.data!.industryId" placeholder="请选择行业">
              <el-option v-for="item in industryList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select> -->
        <el-cascader
          v-model="dialogProps.data!.industryId"
          check-strictly
          disabled
          :options="dialogProps.list"
          :props="{ label: 'name', value: 'id', emitPath: false }"
          style="width: 100%"
        />
      </el-form-item>
      <!-- <el-form-item label="启用状态" prop="status">
        <el-radio-group v-model="dialogProps.data!.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="2">停用</el-radio>
        </el-radio-group>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="visible = false">取消</el-button>
    </template>
  </vab-dialog>
</template>

<style lang="scss" scoped></style>
